<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../plugins/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="../plugins/layui/css/myPage.css">
    <style>
        .autocomplete-suggestions { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border: 1px solid #999; background: #FFF; cursor: default; overflow: auto; -webkit-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); -moz-box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); box-shadow: 1px 4px 3px rgba(50, 50, 50, 0.64); z-index: 29891015 !important;}
        .autocomplete-suggestion { padding: 2px 5px; white-space: nowrap; overflow: hidden; }
        .autocomplete-no-suggestion { padding: 2px 5px;}
        .autocomplete-selected { background: #F0F0F0; }
        .autocomplete-suggestions strong { font-weight: bold; color: #000; }
        .autocomplete-group { padding: 2px 5px; font-weight: bold; font-size: 16px; color: #000; display: block; border-bottom: 1px solid #000; }
    </style>
</head>
<body style=" overflow-x:hidden;" >
<div class="layui-container" >

    <form class="layui-form">
        <div class="layui-row">
            <div class="layui-col-md12">
                <fieldset class="layui-elem-field  " style="margin-top: 20px;">
                    <legend>线路详细信息</legend>


                    <div class="layui-form-item">
                        <label class="layui-form-label"><span style="color: red;">*</span>线路名称</label>
                        <div class="layui-input-inline" style="width: 440px;">
                            <input   type="text" name="xlmc"   required lay-verify="required" placeholder="请输入"  class="layui-input"  >
                        </div>
                        <label class="layui-form-label"> 线路助记码</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <input   type="text" name="xlzjm"   lay-verify="" placeholder="请输入"  class="layui-input  "  >
                            <input   name="sfcz"   type="hidden" value="1">
                            <input   name="xlid"   type="hidden">
                        </div>


                        <label class="layui-form-label">线路编码</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <input   type="text" name="xlbm"   lay-verify="" placeholder="请输入"  class="layui-input  "  >
                        </div>


                    </div>



                    <div class="layui-form-item">


                        <label class="layui-form-label"><span style="color: red;">*</span>客户简称</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <div class="layui-input-inline layui-form" style="width: 150px;">
                                <input   type="hidden" name="khjc" id="khjcHid" >
                                <select name="khid" lay-verify="required" lay-search   id="khjc"  lay-filter="khjc"	 style="width: 150px;" >
                                    <option value="">搜索选择</option>
                                </select>
                            </div>
                        </div>


                        <label class="layui-form-label"> </span>区域名称</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <input   type="hidden" name="qymc" id="qymcHid" >
                            <select name="qyid"   lay-search  id="qymc"  style="width: 150px;" >
                                <option value="">搜索选择</option>
                            </select>
                        </div>


                        <label class="layui-form-label" style="width: 100px"><span style="color: red;">*</span>线路类型</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <select name="xllx"  required lay-verify="required">
                                <option value=""></option>
                                <option value="单开">单开</option>
                                <option value="对开">对开</option>
                                <option value="当天往返">当天往返</option>
                                <option value="来回">来回</option>
                            </select>
                        </div>


                        <label class="layui-form-label"> </span>班次类型</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <select name="leixing"   >
                                <option value=""></option>
                                <option value="正班" selected>正班</option>
                                <option value="加班">加班</option>
                            </select>
                        </div>


                    </div>



                    <div class="layui-form-item">
                        <label class="layui-form-label">默认车牌号</label>
                        <div class="layui-input-inline" style="width: 150px;">
                            <select name="clid"   lay-search   id="clid" >
                                <option value=""></option>
                            </select>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label">发车时间</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" id="fcsj" name="fcsj" autocomplete="off" class="layui-input" placeholder="请选择" id="startTime">
                            </div>
                        </div>
                        <div class="layui-inline" >
                            <label class="layui-form-label" style="width: 87px">到达时间</label>
                            <div class="layui-input-inline"  style="width: 150px;" >
                                <input type="text"  id="ddsj" name="ddsj" autocomplete="off" class="layui-input" placeholder="请选择" id="stopTime">
                            </div>
                        </div>
                    </div>





                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 100px;">线路有效期(起)</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="xlyxqq" autocomplete="off" class="layui-input" placeholder="请选择" id="xlyxqq">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 100px;" >线路有效期(止)</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="xlyxqz" autocomplete="off" class="layui-input" placeholder="请选择" id="xlyxqz">
                            </div>
                        </div>
                    </div>
                    <fieldset class="layui-elem-field" style="margin-top: 20px;">
                        <legend>经停点信息</legend>


                        <div class="layui-form-item">
                            <label class="layui-form-label"> 到达时间 </label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input   type="text" name="jtdddsj"   id="jtdddsj" placeholder=""  class="layui-input"  >
                                <input   type="hidden" name="jtdm"   id="jjlxrData"    >
                            </div>


                            <label class="layui-form-label"> 发出时间 </label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input   type="text" name="jtdfcsj"   id="jtdfcsj" placeholder=""  class="layui-input"  >

                            </div>
                            <div class="layui-inline"  >
                                <button type="button" class="layui-btn layui-btn-normal" id="addEmcPer">添加到下方</button>
                            </div>
                        </div>


                        <div class="layui-form-item">
                            <div class="layui-form-item">
                                <script type="text/html" id="opera">
                                    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
                                </script>

                                <table id="jjlxr" lay-filter="jjlxr"></table>

                            </div>

                        </div>



                    </fieldset>

                    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                        <legend>运行周期</legend>
                    </fieldset>



                    <script type="text/html" id="road">
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road1" id="road1" >周一</a>
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road2" id="road2">周二</a>
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road3" id="road3" >周三</a>
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road4" id="road4">周四</a>
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road5" id="road5">周五</a>
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road6" id="road6">周六</a>
                        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="road7" id="road7">周日</a>
                    </script>

                    <table id="table" lay-filter="roadPeriod"  ></table>
                </fieldset>
            </div>
        </div>

        <div class="layui-row">
            <div class="layui-col-md12">
                <fieldset class="layui-elem-field  " style="margin-top: 20px;">
                    <legend>其他信息</legend>


                    <div class="layui-form-item">


                        <div class="layui-inline">
                            <label class="layui-form-label" >货物</label>
                            <div class="layui-input-inline" style="width: 430px;">
                                <input type="text" name="huowu" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline" >
                            <label class="layui-form-label" style="width:60px;">货物属性</label>
                            <div class="layui-input-inline"  style="width: 150px;" >
                                <input type="text"   name="hwsx" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline">
                            <label class="layui-form-label" style="width:90px;">货物数量</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="hwsl" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                    </div>
                    <div class="layui-form-item">
                        <div class="layui-inline" >
                            <label class="layui-form-label"  >运费</label>
                            <div class="layui-input-inline"  style="width: 150px;" >
                                <input type="text" id="yunfei"  name="yunfei" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 72px">公里数</label>
                            <div class="layui-input-inline" style="width: 145px;">
                                <input type="text" name="gls" id="gls" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 60px">油单价</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="ydj" id="ydj" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 100px">油价设置日期</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="yjszrq" id="yjszrq" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                    </div>

                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 90px">支出上限</label>
                            <div class="layui-input-inline" style="width: 150px;">
                                <input type="text" name="zcsx" id="zcsx" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-inline">
                            <label class="layui-form-label" style="width: 73px">线路补助</label>
                            <div class="layui-input-inline" style="width: 145px;">
                                <input type="text" name="buzhu" id="buzhu" autocomplete="off" class="layui-input">
                            </div>
                        </div>

                    </div>

                    <button class="layui-btn layui-btn-normal"  lay-submit  lay-filter="new" style="width: 10%; position: absolute;left: 35%"  >立即提交</button>
                    <button type="reset" class="layui-btn layui-btn-normal" style="width: 10%; position: absolute;left: 55%" >重置</button>
                </fieldset>
            </div>
        </div>


    </form>
    <form class="layui-form" hidden>
        <div class="layui-form-item" >
            <input  id="yxzqzhouyi" type="hidden" name="yxzqzhouyi" class="layui-input"  >
            <input  id="yxzqzhouer" type="hidden" name="yxzqzhouer" class="layui-input"  >
            <input  id="yxzqzhousan" type="hidden" name="yxzqzhousan" class="layui-input"  >
            <input  id="yxzqzhousi" type="hidden" name="yxzqzhousi" class="layui-input"  >
            <input  id="yxzqzhouwu" type="hidden" name="yxzqzhouwu" class="layui-input"  >
            <input  id="yxzqzhouliu" type="hidden" name="yxzqzhouliu" class="layui-input"  >
            <input  id="yxzqzhouri" type="hidden" name="yxzqzhouri" class="layui-input"  >

        </div>
    </form>
</div>
<script src="../plugins/layui/layui.js"></script>
<script src="../js/config.js"></script>
<script src="../js/tools.js"></script>
<script>
    layui.use(['laydate','form','element','table'], function(){
        var laydate = layui.laydate;
        var form = layui.form;
        var element = layui.form;
        var table = layui.table;
        var $ = layui.$;
        var yxzqzhouyi = 0;
        var yxzqzhouer = 0;
        var yxzqzhousan = 0;
        var yxzqzhousi = 0;
        var yxzqzhouwu = 0;
        var yxzqzhouliu = 0;
        var yxzqzhouri = 0;



        //小数补全

        $("#buzhu,#yunfei,#gls,#ydj").on("blur",function(){
            if($(this).val()==""){
                return
            }else {
                return  $(this).val(parseFloat($(this).val()).toFixed(2));
            }
        });

        //渲染经停点表格
        table.render({
            elem:'#jjlxr'
            ,page:true
            ,cellMinWidth: 80
            ,data:jjlxrArr
            ,limit:5
            ,cols: [[
                {type:'numbers', title: '序号',  align:'center'}

                ,{field:'ddsj', title: '到达时间' ,align: 'center' }
                ,{field:'fcsj', title: '发出时间' ,align: 'center' }
                ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' ,width:150}

            ]]
        });
        //校验

        var jjlxrArr = [];
        $("#addEmcPer").on('click',function () {

            var elem = {};
            var ddsj = $("#jtdddsj").val();
            var fcsj = $("#jtdfcsj").val();
            console.log(ddsj+fcsj);
          $("#jtdfcsj").val("");
          $("#jtdddsj").val("");
            if (ddsj && fcsj  ) {
                elem.ddsj = ddsj;
                elem.fcsj = fcsj;


                jjlxrArr.push(elem);

                table.render({
                    elem: '#jjlxr'
                    , page: true
                    , cellMinWidth: 80
                    , data: jjlxrArr
                    , limit: 5
                    , cols: [[
                        {type: 'numbers', title: '序号', align: 'center'}

                        , {field: 'ddsj', title: '到达时间', align: 'center'}
                        , {field: 'fcsj', title: '发出时间', align: 'center'}
                        , {fixed: 'right', title: '操作', align: 'center', toolbar: '#opera', width: 150}

                    ]]
                });

            } else {
                layer.msg("到达时间发出时间不能为空");
            }
        });

        table.on('tool(jjlxr)', function(obj){
            var data = obj.data //获得当前行数据
                ,layEvent = obj.event; //获得 lay-event 对应的值
            if(layEvent === 'del'){

                $.each(jjlxrArr,function (i,e) {
                    if(e.fcsj == data.fcsj && e.ddsj == data.ddsj){
                        jjlxrArr.splice(i,1);
                        return false;
                    }
                })
                        table.render({
                            elem:'#jjlxr'
                            ,page:true
                            ,cellMinWidth: 80
                            ,data:jjlxrArr
                            ,limit:5
                            ,cols: [[
                                {type:'numbers', title: '序号',  align:'center'}
                                ,{field:'ddsj', title: '到达时间' ,align: 'center' }
                                ,{field:'fcsj', title: '发出时间' ,align: 'center' }
                                ,{fixed: 'right',title:'操作', align:'center', toolbar: '#opera' ,width:150}

                            ]]
                        });


            }
        });


//默认车牌号 autocomplete
        $.ajax({
            url: contextPath+"/car",
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {

                for(var i in res.list){

                    var option = "<option value='"+ res.list[i].clid+ "'>"+res.list[i].cph+"</option>";

                    $("#clid").append(option);
                };
                form.render('select');
            }

        });

        $("#close").on('click',function(){
            console.log("close");
            //当你在iframe页面关闭自身时
            var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
            parent.layer.close(index); //再执行关闭
        });
        $.ajax({
            url: contextPath+"/cstmr",
            type: "GET",
            contentType:"application/json;charset=utf-8",
            dataType:"json",
            success: function(res) {

                for(var i in res.list){

                    var option = "<option value='"+ res.list[i].khid+ "'>"+res.list[i].khjc+"</option>";

                    $("#khjc").append(option);
                };
                form.render('select');
            }

        });
        form.on('select(khjc)', function (data) {
            $("#qymc").empty() ;
            $.ajax({
                url: contextPath+"/area/"+data.value,
                type: "GET",
                contentType:"application/json;charset=utf-8",
                dataType:"json",
                success: function(res) {
                    console.log(res);
                    for(var i in res.list){

                        var option = "<option value='"+ res.list[i].qyid+ "'>"+res.list[i].qymc+"</option>";

                        $("#qymc").append(option);
                    };
                    form.render('select');
                }
            });
        });

        table.render({
            elem:'#table'
            ,data:[{ } ]
            ,cols: [[
                 {  title: '请选择（周一~周日）', align:'center',toolbar:'#road'}
            ]]
        });
        //监听工具条
        table.on('tool(roadPeriod)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"

             var layEvent = obj.event; //获得 lay-event 对应的值

            if(layEvent === 'road1'){
               if( $("#road1").hasClass("layui-btn-danger")){
                    $("#road1").removeClass("layui-btn-danger");
                    $("#road1").addClass("layui-btn-normal");
                   yxzqzhouyi = 0;
                }else{
                    $("#road1").removeClass("layui-btn-normal");
                    $("#road1").addClass("layui-btn-danger");
                   yxzqzhouyi = 1;
                }

            }else if(layEvent === 'road2'){
                if( $("#road2").hasClass("layui-btn-danger")){
                    $("#road2").removeClass("layui-btn-danger");
                    $("#road2").addClass("layui-btn-normal");
                    yxzqzhouer = 0;
                }else{
                    $("#road2").removeClass("layui-btn-normal");
                    $("#road2").addClass("layui-btn-danger");
                    yxzqzhouer=1;
                }

            }else if(layEvent === 'road3'){
                if( $("#road3").hasClass("layui-btn-danger")){
                    $("#road3").removeClass("layui-btn-danger");
                    $("#road3").addClass("layui-btn-normal");
                    yxzqzhousan = 0;
                }else{
                    $("#road3").removeClass("layui-btn-normal");
                    $("#road3").addClass("layui-btn-danger");
                    yxzqzhousan = 1;
                }

            }else if(layEvent === 'road4'){
                if( $("#road4").hasClass("layui-btn-danger")){
                    $("#road4").removeClass("layui-btn-danger");
                    $("#road4").addClass("layui-btn-normal");
                    yxzqzhousi = 0;
                }else{
                    $("#road4").removeClass("layui-btn-normal");
                    $("#road4").addClass("layui-btn-danger");
                    yxzqzhousi = 1;
                }

            }else if(layEvent === 'road5'){
                if( $("#road5").hasClass("layui-btn-danger")){
                    $("#road5").removeClass("layui-btn-danger");
                    $("#road5").addClass("layui-btn-normal");
                    yxzqzhouwu = 0;
                }else{
                    $("#road5").removeClass("layui-btn-normal");
                    $("#road5").addClass("layui-btn-danger");
                    yxzqzhouwu = 1;
                }

            }else if(layEvent === 'road6'){
                if( $("#road6").hasClass("layui-btn-danger")){
                    $("#road6").removeClass("layui-btn-danger");
                    $("#road6").addClass("layui-btn-normal");
                    yxzqzhouliu = 0;
                }else{
                    $("#road6").removeClass("layui-btn-normal");
                    $("#road6").addClass("layui-btn-danger")
                    yxzqzhouliu = 1;
                }

            }else if(layEvent === 'road7'){
                if( $("#road7").hasClass("layui-btn-danger")){
                    $("#road7").removeClass("layui-btn-danger");
                    $("#road7").addClass("layui-btn-normal");
                    yxzqzhouri = 0;
                }else{
                    $("#road7").removeClass("layui-btn-normal");
                    $("#road7").addClass("layui-btn-danger");
                    yxzqzhouri = 1;
                }

            }
        });
        //执行一个laydate实例
        laydate.render({
            elem: '#yjszrq' //指定元素
            ,type: 'date'
            ,theme:'#0099FF'
            ,format:'yyyy-MM-dd'
        });
        laydate.render({
            elem: '#fcsj' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });
        laydate.render({
            elem: '#ddsj' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });
        laydate.render({
            elem: '#jtdddsj' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });
        laydate.render({
            elem: '#jtdfcsj' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });
        laydate.render({
            elem: '#xlyxqq' //指定元素
            ,type: 'date'
            ,theme:'#0099FF'
            ,format:'yyyy-mm-dd'
        });
        laydate.render({
            elem: '#xlyxqz' //指定元素
            ,type: 'date'
            ,theme:'#0099FF'
            ,format:'yyyy-mm-dd'
        });
        laydate.render({
            elem: '#startTime' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });
        laydate.render({
            elem: '#stopTime' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });
        laydate.render({
            elem: '#startTime1' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });
        laydate.render({
            elem: '#stopTime1' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });
        laydate.render({
            elem: '#startTime2' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });
        laydate.render({
            elem: '#stopTime2' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });
        laydate.render({
            elem: '#startTime3' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });
        laydate.render({
            elem: '#stopTime3' //指定元素
            ,type: 'time'
            ,theme:'#0099FF'
            ,format:'HH:mm'
        });

        form.on('submit(new)', function(data){

            var yxzq = {"yxzqzhouyi":yxzqzhouyi,"yxzqzhouer":yxzqzhouer,"yxzqzhousan":yxzqzhousan,"yxzqzhousi":yxzqzhousi,"yxzqzhouwu":yxzqzhouwu,"yxzqzhouliu":yxzqzhouliu,"yxzqzhouri":yxzqzhouri};

            var res = $.extend({},data.field,yxzq);
            $("input").css("border","");
            if(jjlxrArr == []){
                res.jtdm = '[]' ;
            }else {
                res.jtdm = JSON.stringify(jjlxrArr) ;
            }


            $.ajax({
                url: contextPath+"/road",
                type: "POST",
                contentType:"application/json;charset=utf-8",
                data: JSON.stringify(res) ,
                dataType:"json",
                success: function(res) {
                    newSuccess($,layer,res);
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });
    });

</script>
</body>
</html>